<template>
  <div class="hello">
    <div>
      <mnav :tabs="list" @navPageIndex="getCurrentNavIndex" ref="nav"></mnav>
      <div class="slider-wrapper" ref="wraper">
        <slider @pageIndex="getPageIndex" ref="slider">
          <div v-for="item in list" :key="item.title" ref="wrapItem">
            <scroll :data="item.data" class="scroll-content" ref="scroll">
              <ul>
                <li class="cont-item" v-for="(t, index) in item.data" :key="index" v-text="t"></li>
              </ul>
            </scroll>
          </div>
        </slider>
      </div>
    </div>
  </div>
</template>

<script>
import Slider from 'base/slider/slider'
import Scroll from 'base/scroll/scroll'
import Mnav from './Nav'
import { data } from './data'

export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App',
      list: data
    }
  },
  mounted () {
    this.$refs.wraper.style.height = document.documentElement.clientHeight - 40 + 'px'
  },
  methods: {
    getCurrentNavIndex (index) {
      if (this.$refs.slider.slider) {
        console.log('navindex=>', index)
        this.$refs.slider.slider.goToPage(index, 0, 400)
      }
    },
    getPageIndex (index) {
      console.log('getPageIndex=>', index)
      this.$refs.nav.currentIndex !== index && (this.$refs.nav.selectItem(index))
    }
  },
  components: {
    Slider,
    Scroll,
    Mnav
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="stylus" rel="stylesheet/stylus">
li {
  display: block;
}
a {
  color: #42b983;
}
.slider-wrapper {
  top: 40px;
  position: fixed;
  width: 100%;
  bottom: 0;
  .scroll-content {
    height: 100%;
    overflow: hidden;
    text-align: left;
    padding-left: 10px;
    ul {
      overflow: auto;
      margin: 0;
      .cont-item {
        height: 70px;
        line-height: 70px;
      }
    }
  }
}
</style>
